<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">

	<ui:component>
		<a4j:region>
			<rich:popupPanel id="showDetailsPanel" modal="true" resizable="false"
			onmaskclick="#{rich:component('showDetailsPanel')}.hide()"
			styleClass="modalPanelStyle"
			headerClass="modalPanelHeader" width="960" height="600" top="25">
			 <f:facet name="header">
				<h:panelGrid columns="2" styleClass="popupHeaderGrid"
				columnClasses="popupHeaderTitle, popupHeaderControls">
					<h:outputText value="#{xQueriesBackend.show.detailsPanelHeader} #{xQueriesBackend.selectedMods.genre} #{xQueriesBackend.selectedMods.id}"/> 
              		<h:panelGroup layout="block">
                 		<a4j:commandButton id="progressCloseBtn" styleClass="appButton"
                   		execute="@this"
                   		image="/resources/img/icons/action.remove.dark.png"
                   		oncomplete="#{rich:component('showDetailsPanel')}.hide()"/>                   		   
              		</h:panelGroup>				
				</h:panelGrid>
			 
			 </f:facet>
						
				<rich:extendedDataTable id="relatedItemsTable" var="relItem"
	  					value="#{xQueriesBackend.selectedMods.items}" selectionMode="none" 
	  					rows="11" sortMode="single"
						styleClass="itemsCenterTable" 
						columnClasses="relIDCol, relDateCol, relSummCol, relTrackCol,
						 relURICol"
						rowClass="centerItemTableRow">		
						
					<rich:column id="relItemNum" sortBy="#{relItem.number}" width="50px">
	  						<f:facet name="header">
	  							<h:outputText value="#{xQueriesBackend.show.modsId}" />
	  						</f:facet>

	  						<h:outputText id="relItemNumLabel" value="#{relItem.number}" />

	  				</rich:column>
	  				
					<rich:column id="relItemDate" sortBy="#{relItem.date}" width="50px">
	  						<f:facet name="header">
	  							<h:outputText value="#{xQueriesBackend.show.itemDate}" />
	  						</f:facet>

	  						<h:outputText id="relItemDateLabel" value="#{relItem.date}" />

	  				</rich:column>
	  				
					<rich:column id="relItemDesc" sortBy="#{relItem.summary}" width="400px">
	  						<f:facet name="header">
	  							<h:outputText value="#{xQueriesBackend.show.itemShort}" />
	  						</f:facet>

	  						<h:outputText id="relItemDescLabel" value="#{relItem.summary}" />

	  				</rich:column>
					
					<rich:column id="relItemTrack" sortBy="#{relItem.track}" width="50px">
	  						<f:facet name="header">
	  							<h:outputText value="#{xQueriesBackend.show.itemTrack}" />
	  						</f:facet>

	  						<h:outputText id="relItemTrackLabel" value="#{relItem.track}" />

	  				</rich:column>
	  				
					<rich:column id="relItemUri" sortBy="#{relItem.uri}" width="350px">
	  						<f:facet name="header">
	  							<h:outputText value="#{xQueriesBackend.show.modsURI}" />
	  						</f:facet>

	  						<h:outputText id="relItemUriLabel" value="#{relItem.uri}" />

	  				</rich:column>					
											
				</rich:extendedDataTable>		
						
						 <ul>
							<a4j:repeat value="#{xQueriesBackend.relatedList}" var="rel" id="repeat">
								<li class="itemLi">								
									<h:outputText value="#{rel}"/>	
									
								</li>							
							</a4j:repeat>
						</ul>
			 
			 			 
			</rich:popupPanel>
		</a4j:region>
	</ui:component>
</ui:composition>	